<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>修德抄经堂</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" type="text/css" href="../bower_components/mui/dist/css/mui.min.css">
	<script src="../bower_components/mui/dist/js/mui.min.js"></script>
	<script src="../bower_components/jquery/dist/jquery.min.js"></script>
	<script src="../js/resLoader.js"></script>
	<script src="../js/common.js"></script>
	<!--<script src="../js/index.js"></script>-->
	<link rel="stylesheet" type="text/css" href="../css/base.css">
	<link rel="stylesheet" type="text/css" href="../css/full.css">
	<link rel="stylesheet" type="text/css" href="../css/dizhi.css">
</head>

<body>
	<div class="page">
		<div id="content">
			<!--<div id="address" class="same color">
				地址管理
			</div>-->
			<div style="background: #1a2639; padding-bottom: 15px;">
				<h1 class="titles same" style="font-size: 26px; color: #c9b231; font-weight: 100;border-bottom: 1px solid #c9b231;padding-left: 13px; padding-top: 15px;">配送</h1>

				<ul class="address_p1" id="address_list" style="background: #1a2639;">
					<!-- <li style="width: 92%; margin: 0 auto; padding-top: 0; position: relative;">
						<img class="btnDel" style="position: absolute;top: 10px; right: 3%;width: 25px;z-index:9999;cursor:pointer;" src="../img/delet.png" />
						<div class="btn" style="padding: 0;">
							<div class="mui-input-row mui-checkbox mui-left" style="padding: 5px 0;">
							  	<label class="fang" style="padding:0 15px 0 35px;font-family: fang; color: #c9b231;">张三<span style="margin-left: 40px;" class="fang">15770896001</span></label>
							  	<label class="fang" style="padding:0 15px 0 35px;font-family: fang; color: #c9b231;">北京市海定区十九</label>
							  	<input name="checkbox1" value="Item 1" type="checkbox" style="left: 6px; top: 17px;">
							</div>
							
						</div>
					</li>
					<li style="width: 92%; margin: 0 auto; padding-top: 0; position: relative;">
						<img class="btnDel"  style="position: absolute;top: 10px; right: 3%;width: 25px;z-index:9999;cursor:pointer;" src="../img/delet.png" />
						<div class="btn" style="padding: 0;">
							<div class="mui-input-row mui-checkbox mui-left" style="padding: 5px 0;">
							  	<label class="fang" style="padding:0 15px 0 35px;font-family: fang; color: #c9b231;">张三<span style="margin-left: 40px;" class="fang">15770896001</span></label>
							  	<label class="fang" style="padding:0 15px 0 35px;font-family: fang; color: #c9b231;">北京市海定区十九</label>
							  	<input name="checkbox1" value="Item 1" type="checkbox" style="left: 6px; top: 17px;">
							</div>

						</div>
					</li> -->
				</ul>
				<a href="add_address.html?returnUrl=dizhi.html">
					<div id="add_address" class="same color">添加新地址
						<img style="width: 16px;" src="../img/benxin/add_huang.png">
					</div>
				</a>

				<div style="width: 100%; text-align: center;">
					<img style="width: 16px; text-align: center;" src="../img/btin.png" />
				</div>
			</div>

			<div style="background: #1a2639; margin-top: 25px; padding-bottom: 15px;">
				<h1 class="titles same" style="font-size: 26px; margin: 0 auto; color: #c9b231; width: 92%; font-weight: 100;border-bottom: 1px solid #c9b231;padding-top: 15px;">布施</h1>
				<ul class="address_p2" id="address_list1" style="background: #1a2639;">
					<!-- <li style="width: 92%; margin: 0 auto; padding-top: 0;">
						<div class="btn" style="padding: 0;">
							<div class="mui-input-row mui-checkbox mui-left">
							  	<label class="fang" style="padding-left: 35px;font-family: fang; color: #c9b231;">九华山</label>
							  	<input name="checkbox1" value="Item 1" type="checkbox" style="left: 6px; top: 9px;">
							</div>

						</div> -->
					</li>
					<!--<li style="width: 92%; margin: 0 auto; padding-top: 0;">-->
					<!--<div class="btn" style="padding: 0;">-->
					<!--<div class="mui-input-row mui-checkbox mui-left">-->
					<!--<label class="fang" style="padding-left: 35px;font-family: fang; color: #c9b231;">九华山</label>-->
					<!--<input name="checkbox1" value="Item 1" type="checkbox" style="left: 6px; top: 9px;">-->
					<!--</div>-->
					<!--</div>-->
					<!--</li>-->
					<!--<li style="width: 92%; margin: 0 auto; padding-top: 0;">-->
					<!--<div class="btn" style="padding: 0;">-->
					<!--<div class="mui-input-row mui-checkbox mui-left">-->
					<!--<label class="fang" style="padding-left: 35px;font-family: fang; color: #c9b231;">九华山</label>-->
					<!--<input name="checkbox1" value="Item 1" type="checkbox" style="left: 6px; top: 9px;">-->
					<!--</div>-->
					<!--</div>-->
					<!--</li>-->
					<!--<li style="width: 92%; margin: 0 auto; padding-top: 0;">-->
					<!--<div class="btn" style="padding: 0;">-->
					<!--<div class="mui-input-row mui-checkbox mui-left">-->
					<!--<label class="fang" style="padding-left: 35px;font-family: fang; color: #c9b231;">九华山</label>-->
					<!--<input name="checkbox1" value="Item 1" type="checkbox" style="left: 6px; top: 9px;">-->
					<!--</div>-->
					<!--</div>-->
					<!--</li>-->
					<!--<li style="width: 92%; margin: 0 auto; padding-top: 0;">-->
					<!--<div class="btn" style="padding: 0;">-->
					<!--<div class="mui-input-row mui-checkbox mui-left">-->
					<!--<label class="fang" style="padding-left: 35px;font-family: fang; color: #c9b231;">九华山</label>-->
					<!--<input name="checkbox1" value="Item 1" type="checkbox" style="left: 6px; top: 9px;">-->
					<!--</div>-->
					<!--</div>-->
					<!--</li>-->
				</ul>
			</div>
			<!-- <a href="yinshua.html">
				<button type="submit" id="queren" class="same">确认</button>
			</a> -->

			<button type="button" id="queren" class="same">确认</button>
		</div>

		<div id="fugai"></div>
		<p id="wanshan" class="fang">请选择</p>
	</div>
</body>
<script>
	var selectedAddressList = [];

	$(function () {
		// 加载用户地址列表
		$.ajax({
			url: '/fe/user/address_list',
			data: {
				"limit": 10,
				"offset": 0,
			},
			success: function (data) {
				var html = '';
				var data = data.data;
				for (var i = 0, len = data.length; i < len; i++) {

					html += '<li style="width: 92%; margin: 0 auto; padding-top: 0; position: relative;"' +
							'data-address-id=' + data[i].id + ' data-address-contact="' + data[i].contact +
							'" data-address-address="' + data[i].address + '" data-address-phone="' + data[i].phone + '">' +
						'<img data-address-id=' + data[i].id +
						' class="btnDel" style="position: absolute;top: 10px; right: 3%;width: 25px;z-index:9999;cursor:pointer;" src="../img/delet.png" />' +
						'<div class="btn" style="padding: 0;">' +
						'<div class="mui-input-row mui-checkbox mui-left" style="padding: 5px 0;">' +
						'<label class="fang" style="padding:0 15px 0 35px;font-family: fang; color: #c9b231;">' + data[i].contact +
						'<span style="margin-left: 40px;" class="fang">' + data[i].phone + '</span></label>' +
						'<label class="fang" style="padding:0 15px 0 35px;font-family: fang; color: #c9b231;">' + data[i].address +
						'</label>' +
						'<input name="checkbox1" value="Item 1" type="checkbox" style="left: 6px; top: 17px;">' +
						'</div>' +

						'</div>' +
						'</li>';
				}
				$('#address_list').append(html);

				$(".btnDel").on("tap", function (e) {
					var addressID = e.currentTarget.dataset["addressId"];
					// 删除地址
					var csrftoken = getCookie('csrftoken');
					$.ajax({
						url: "/fe/user/address_list/" + addressID,
						method: "DELETE",
						beforeSend: function (xhr, settings) {
							xhr.setRequestHeader("X-CSRFToken", csrftoken);
						},
						success: function(data) {
							// $(this).closest('li').remove();
							location.reload();
						}
					});
				});


			},
			error: function (error) {
				console.log(error)
			}
		})

		// 加载施愿处列表
		$.ajax({
			url: '/fe/print/temples',
			data: {
				"limit": 10,
				"offset": 0,
			},
			success: function (data) {
				var html = '';
				var data = data.data;
				for (var i = 0, len = data.length; i < len; i++) {
					html += '<li style="width: 92%; margin: 0 auto; padding-top: 0;"' +
							' data-donation-id=' + data[i].id + ' data-donation-name="' + data[i].name + '">' +
						'<div class="btn" style="padding: 0;">' +
						'<div class="mui-input-row mui-checkbox mui-left">' +
						'<label class="fang" style="padding-left: 35px;font-family: fang; color: #c9b231;">' + data[i].name +
						'</label>' +
						'<input name="checkbox1" value="' + data[i].id + '" type="checkbox" style="left: 6px; top: 9px;">' +
						'</div>' +
						'' +
						'</div>' +
						'</li>'
				}
				$('#address_list1').append(html);


			},
			error: function (error) {
				console.log(error)
			}
		})

		$("#address_list li:first .btn .left span").addClass("color");

		$("#address_list li:first .btn .left img").attr("src", "../img/ok.png");
		$('.btn .left span').click(function () {
			$('.btn .left span').removeClass("color");
			$(this).addClass("color");
			$(".btn .left img").attr("src", "../img/nook.png")
			$(this).parent().find("img").attr("src", "../img/ok.png")
		})
		$('.btn .left img').click(function () {
			$('.btn .left img').attr("src", "../img/nook.png")
			$(this).attr("src", "../img/ok.png")
			$(".btn .left span").removeClass("color");
			$(this).parent().find("span").addClass("color");
		});

		$("#queren").click(function () {
			// 没选择地址
			var $addressArr = $(".address_p1 input:checked").closest('div').find('label');
            var $donationArr = $(".address_p2 input:checked").closest('div').find('label');
			if($donationArr.length < 1){
                if ($addressArr.length < 2) {
                    $("#fugai,#wanshan").show();
                    setTimeout(function () {
                        $("#fugai,#wanshan").hide();
                    }, 1000);

                    return;
                }
			}

			// 将选择的地址写入selectedAddressList
			var selectedAddressLi = $($addressArr).closest('li');
			for (var i =0; i < selectedAddressLi.length; i++){
				var addressData = {
					id: selectedAddressLi[i].dataset["addressId"],
					contact: selectedAddressLi[i].dataset["addressContact"],
					phone: selectedAddressLi[i].dataset["addressPhone"],
					address: selectedAddressLi[i].dataset["addressAddress"],
					type: "address",
				}
				selectedAddressList.push(addressData);
			}

			// var _address = $addressArr.eq(0).text() || '';
			// var _detailed = $addressArr.eq(1).text() || '';

			// 没选择施愿处
			// if ($donationArr.length < 1) {
			// 	$("#fugai,#wanshan").show();
			// 	setTimeout(function () {
			// 		$("#fugai,#wanshan").hide();
			// 		$("#fugai,#wanshan").hide();
			// 	}, 1000);
			// 	return;
			// }

			// 将选择的施愿处写入selectedAddressList
			var selectedDonationLi = $($donationArr).closest('li');
			for (var i =0; i < selectedDonationLi.length; i++){
				var donationData = {
					id: selectedDonationLi[i].dataset["donationId"],
					name: selectedDonationLi[i].dataset["donationName"],
					type: "donation",
				}
				selectedAddressList.push(donationData);
			}

			// 将selectedAddressList写入localStorage
			localStorage.setItem("selectedAddressList", JSON.stringify(selectedAddressList));

			// var _donation = $donationArr.eq(0).text() || '';

			// window.location.href = './yinshua.html?add=' + encodeURI(_address) + '&det=' + encodeURI(_detailed) + '&don=' +
			// 	encodeURI(_donation);
			window.location.href = './yinshua.html'

		});
	})

	//	$("#address_list li:last").css("border-bottom","none")
</script>

</html>